<style lang="less">
  .example-code {
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    transition: height .2s ease-in-out;
    .example-code-area {
      position: relative;
      font-size: 14px;
      span.copy, span.scale, span.open-fiddle{
        border-radius: 0 0 3px 3px;
        padding: 2px 5px;
        position: absolute;
        top: 5px;
        right: 0;
        color: #b2b2b2;
        cursor: pointer;
      }
      span.scale{
        right: 25px;
      }
      span.open-fiddle{
        right: 50px;
      }
      .bg + span.copy{
        right: 5px;
      }
      span.copy:hover, span.scale:hover, span.open-fiddle:hover{
        color: #5c6b77;
      }
      pre {
        margin: 0
      }
    }
    .example-code-more{
      position: absolute;
      bottom: 0;
      left: 4px;
      right: 4px;
      text-align: center;
      cursor: pointer;
      padding: 5px 0;
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        box-shadow: inset 0 -15px 30px #ffffff;
      }
      &:hover {
        color: #2d8cf0
      }
      i {
        position: relative;
        top: 5px;
        z-index: 2;
      }
    }

  }
  .code-scale-modal .ivu-modal-body{
    background-color: #f7f7f7;
  }
  .code-scale-modal pre{
    font-size: 14px;
  }
</style>
<template>
  <div class="example-code" :style="{height: height}">
    <div style="opacity: 1;" ref="mainArea">
      <div class="example-code-area">
        <pre :class="{bg: bg}"><code :class="language" ref="code"><slot></slot></code></pre>
        <!--    <span class="open-fiddle" v-if="title !== 'Code'" @click="openFiddle">-->
        <!--      <Tooltip content="在 JSFiddle 中打开" placement="top" transfer>-->
        <!--        <Icon type="code" size="18" />-->
        <!--      </Tooltip>-->
        <!--    </span>-->
        <span class="scale" @click="scale">
      <Tooltip content="放大" placement="top" transfer>
        <Icon type="qr-scanner" size="18"></Icon>
      </Tooltip>
    </span>
        <span class="copy" @click="clip">
      <Tooltip content="复制代码" placement="top" transfer>
        <Icon type="clipboard" size="18" v-show="!copied"></Icon>
        <Icon type="checkmark" size="18" v-show="copied" style="color:#5cb85c"></Icon>
      </Tooltip>
    </span>
        <Modal class-name="code-scale-modal" :title="title" width="65" v-model="openScale">
          <pre :class="{bg: bg}"><code :class="language" ref="code2"></code></pre>
        </Modal>
      </div>
    </div>
    <div class="example-code-more" v-if="showMore" @click="toggleMore">
      <Icon type="ios-arrow-up" v-if="unwind"></Icon>
      <Icon type="ios-arrow-down" v-else></Icon>
    </div>
  </div>
</template>
<script>
import hljs from 'highlight.js'
import Clipboard from 'clipboard'
// import tag_map from './tag-map';

// It needs to convert some tags when open in fiddle
// function replaceTag (source, tagMap) {
//   Object.keys(tagMap).forEach(i => {
//     source = source
//       .replace(new RegExp(`<${i}\(\\W+\)`, 'g'), `<${tagMap[i]}$1`)
//       .replace(new RegExp(`<\/${i}>`, 'g'), `<\/${tagMap[i]}>`)
//   })
//   return source
// }

export default {
  name: 'i-code',
  props: {
    lang: {
      type: String,
      default: 'javascript'
    },
    bg: {
      type: Boolean,
      default: false
    },
    maxHeight: 0
  },
  data () {
    return {
      openScale: false,
      code: '',
      copied: false,
      title: 'Code',
      unwind: false,
      offsetHeight: 0
    }
  },
  computed: {
    language () {
      if (this.lang === 'auto') {
        return ''
      } else {
        return this.lang
      }
    },
    showMore () {
      return this.maxHeight ? this.offsetHeight > this.maxHeight : false
    },
    height () {
      if (this.maxHeight > 0 && !this.unwind) {
        return this.maxHeight + 'px'
      } else {
        return 'auto'
      }
    }
  },
  mounted () {
    this.code = this.$refs.code.innerHTML.replace(/\n/, '')
    this.$refs.code.innerHTML = this.code
    hljs.highlightBlock(this.$refs.code)

    this.$refs.code2.innerHTML = this.code
    hljs.highlightBlock(this.$refs.code2)

    const Demo = this.$parent.$parent.$parent
    if (Demo.$options.name === 'Demo') {
      this.title = Demo.title
    }
    this.offsetHeight = this.$refs.mainArea.clientHeight
  },
  methods: {
    toggleMore () {
      this.unwind = !this.unwind
    },
    clip () {
      const code = this.code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
      const clipboard = new Clipboard('.copy', {
        text () {
          return code
        }
      })

      clipboard.on('success', (e) => {
        e.clearSelection()
        clipboard.destroy()
        this.copied = true
        this.$Message.success('代码已复制到剪贴板')
        setTimeout(() => {
          this.copied = false
        }, 2000)
      })
    },
    scale () {
      this.openScale = true
    },
    getSource (source, type) {
      const regex = new RegExp(`<${type}[^>]*>`)
      let openingTag = source.match(regex)

      if (!openingTag) return ''
      else openingTag = openingTag[0]

      return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`</${type}>`))
    }
    // openFiddle(){
    //   const source = this.$refs.code.textContent;
    //
    //   const script = this.getSource(source, 'script').replace(/export default/, 'var Main =');
    //   const style = this.getSource(source, 'style');
    //   const template = '<div id="app">' + replaceTag(this.getSource(source, 'template'), tag_map) + '</div>';
    //
    //   const html = [
    //     '<script src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>',
    //     '<script src="//unpkg.com/iview/dist/iview.min.js"></scr' + 'ipt>',
    //     template
    //   ].join('\n');
    //
    //   const css = '@import url("//unpkg.com/iview/dist/styles/iview.css");\n#app{padding: 32px;}' + style;
    //   const js = script + '\nvar Component = Vue.extend(Main)\nnew Component().$mount(\'#app\')';
    //
    //   const data = {
    //     js: js,
    //     css: css,
    //     html: html,
    //     panel_css: 1,
    //     panel_js: 3
    //   };
    //
    //   const formAttributes = {
    //     method: 'post',
    //     action: 'https://jsfiddle.net/api/post/library/pure/',
    //     target: '_blank',
    //     id: 'fiddle-form',
    //     style: 'display: none;'
    //   }
    //
    //   const node = document.createElement('textarea');
    //   const form = document.createElement('form');
    //   for (const attr in formAttributes) {
    //     form.setAttribute(attr, formAttributes[attr]);
    //   }
    //
    //   for (let name in data) {
    //     node.name = name;
    //     node.value = data[name].toString();
    //     form.appendChild(node.cloneNode());
    //   }
    //
    //   document.body.appendChild(form);
    //   form.submit();
    //   document.body.removeChild(form);
    // }
  }
}
</script>
